<template>
	<view
		v-show="show"
		:class="['v-tag', `v-tag--${type}`, `v-tag--${model}`, { 'v-tag--disabled': disabled, 'v-tag--plain': plain }, `v-tag--${size}`]"
		@click="handleClick"
		:style="{ backgroundColor: bgColor, color: txtColor }"
	>
		<view v-if="closable && !disabled" class="v-tag-close" @click.stop="handleClose">×</view>
		<text class="v-tag-content">
			<slot>{{ content }}</slot>
		</text>
	</view>
</template>

<script setup lang="ts">
import { ref, inject, computed } from 'vue';

const props = defineProps({
	type: {
		type: String,
		default: 'default',
		validator: (value: string) => {
			return ['default', 'delete', 'succeed', 'info', 'warn'].includes(value);
		}
	},
	model: {
		type: String,
		default: 'semicircle',
		validator: (value: string) => {
			return ['semicircle', 'circle', 'square'].includes(value);
		}
	},
	size: {
		type: String,
		default: 'medium',
		validator: (value: string) => ['small', 'medium', 'large'].includes(value)
	},
	content: {
		type: String,
		default: ''
	},
	backgroundColor: {
		type: String,
		default: ''
	},
	fontColor: {
		type: String,
		default: ''
	},
	closable: {
		type: Boolean,
		default: false
	},
	disabled: {
		type: Boolean,
		default: false
	},
	plain: {
		type: Boolean,
		default: false
	}
});

const emit = defineEmits(['click', 'close']);

const config = inject<any>('config');
const show = ref(true);

const bgColor = computed(() => props.backgroundColor );

const txtColor = computed(() => props.fontColor );

const handleClick = (event: MouseEvent) => {
	if (!props.disabled) {
		emit('click', event);
	}
};

const handleClose = () => {
	if (!props.disabled && props.closable) {
		show.value = false;
		emit('close', props.content, show.value);
	}
};
</script>

<style lang="scss" scoped>
.v-tag {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	position: relative;
	transition: all 0.3s;
	color: v-bind('config.fontColor.reversal');

	.v-tag-content {
		text-align: center;
		margin: auto;
	}

	.v-tag-close {
		width: 18rpx;
		height: 18rpx;
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		cursor: pointer;
		color: #fff;
		background-color: #666666;
		font-weight: bold;
		font-size: 15rpx;
		padding: 5rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 18rpx;
	}

	&--small {
		padding: 14rpx 10rpx;
		font-size: v-bind('config.fontSize.smallText');
	}
	&--medium {
		padding: 15rpx 12.5rpx;
		font-size: v-bind('config.fontSize.mediumText');
	}
	&--large {
		padding: 20rpx 15rpx;
		font-size: v-bind('config.fontSize.largeText');
	}

	&--default {
		background-color: v-bind('config.backgroundColor.default');
	}

	&--succeed {
		background-color: v-bind('config.backgroundColor.succeed');
	}

	&--warn {
		background-color: v-bind('config.backgroundColor.warn');
	}

	&--delete {
		background-color: v-bind('config.backgroundColor.delete');
	}

	&--info {
		background-color: v-bind('config.backgroundColor.info');
	}

	&--semicircle {
		border-radius: v-bind('config.borderRadius.semicircle');
	}

	&--circle {
		border-radius: v-bind('config.borderRadius.circle');
	}

	&--square {
		border-radius: v-bind('config.borderRadius.square');
	}

	&--disabled {
		opacity: v-bind('config.opacity.disabled');
	}

	&--plain {
		background-color: transparent;
		border: 1rpx solid;
		padding: 8rpx 12rpx;

		&.v-tag--default {
			border-color: v-bind('config.border.default');
			color: v-bind('config.fontColor.default');
		}

		&.v-tag--succeed {
			border-color: v-bind('config.border.succeed');
			color: v-bind('config.fontColor.succeed');
		}

		&.v-tag--warn {
			border-color: v-bind('config.border.warn');
			color: v-bind('config.fontColor.warn');
		}

		&.v-tag--delete {
			border-color: v-bind('config.border.delete');
			color: v-bind('config.fontColor.delete');
		}

		&.v-tag--info {
			border-color: v-bind('config.border.info');
			color: v-bind('config.fontColor.info');
		}

		&.v-tag--semicircle {
			border-radius: v-bind('config.borderRadius.semicircle');
		}

		&.v-tag--square {
			border-radius: v-bind('config.borderRadius.square');
		}
	}
}
</style>
